<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt">
                flex-direction: row
                <text>\n横向布局</text>
            </view>
            <view class="uni-flex uni-row ">
                <view class="flex-item uni-bg-red adjust-width">A</view>
                <view class="flex-item uni-bg-green adjust-width">B</view>
                <view class="flex-item uni-bg-blue adjust-width">C</view>
            </view>
            <view class="uni-title uni-common-mt">
                flex-direction: column
                <text>\n纵向布局</text>
            </view>
            <view class="uni-flex uni-column">
                <view class="flex-item flex-item-V uni-bg-red">A</view>
                <view class="flex-item flex-item-V uni-bg-green">B</view>
                <view class="flex-item flex-item-V uni-bg-blue">C</view>
            </view>
        </view>
    </view>
</template>

<script >
export default {
        name: 'CompView',
        data() {
                return {
        
                };
        },
        methods: {
        
        },
        created() {

        },
        mounted() {

        },
}
</script>
        
<style>
    .adjust-width{
        min-width: 33%;
    }
	
	
</style>